<script setup lang="ts">
import CustomDialog from '@/components/CustomDialog/CustomDialog.vue'

import { useShiftUnitLists } from '@/mixins/TeamManagement/MixinShiftUnitLists'

import type { ScheduleScheme, ShiftUnit } from '@/types'

const props = defineProps<{
  needPagination?: boolean
}>()
const emits = defineEmits<{
  (e: 'to-next'): void
}>()

const info = defineModel<{
  scheduleSchemeId?: ScheduleScheme['id']
  scheduleSchemeName: ScheduleScheme['name']
  shiftUnitId: ShiftUnit['id']
  shiftUnitName: ShiftUnit['name']
  shiftUnitDetails: ShiftUnit['details']
}>({ required: true })

const rules = {
  scheduleSchemeName: [
    { required: true, message: '请输入排班方案名称' },
  ],
}

const title = computed(() => {
  return info.value.scheduleSchemeId ? '编辑' : '新建'
})

const dialogRef = ref<InstanceType<typeof CustomDialog>>()

const {
  loading,
  lists: shiftUnitLists,
  pagination,
  getLists: getShiftUnitLists,
} = useShiftUnitLists()

const prevDisabled = computed(() => {
  return pagination.pageNumber === 1
})
const nextDisabled = computed(() => {
  return (
    pagination.pageNumber * pagination.pageSize
    >= pagination.total
  )
})

function clickPrev() {
  pagination.pageNumber--
  getShiftUnitLists()
}
function clickNext() {
  pagination.pageNumber++
  getShiftUnitLists()
}

function changeHandler() {
  const shiftUnit = shiftUnitLists.value.find(
    v => v.id === info.value.shiftUnitId,
  )
  // console.log(shiftUnit);
  if (shiftUnit) {
    info.value.shiftUnitName = shiftUnit.name
    info.value.shiftUnitDetails = shiftUnit.details
  }
}

function click2next() {
  if (!info.value.scheduleSchemeName) {
    ElMessage.warning('请输入排班方案名称')
    return false
  }
  if (
    !info.value.shiftUnitId
    || !info.value.shiftUnitName
  ) {
    ElMessage.warning('请选择班次单元')
    return false
  }
  close()
  emits('to-next')
  return true
}

function open() {
  // 获取最新的班次单元列表
  getShiftUnitLists()
  dialogRef.value?.open()
}
function close() {
  dialogRef.value?.close()
}

onMounted(() => {
  getShiftUnitLists()
})

defineExpose({
  open,
  close,
})
</script>

<template>
  <CustomDialog
    ref="dialogRef"
    :title="`${title}排班方案 - 选择班次单元`"
    width="740px"
    confirm-button-text="下一步"
    @confirm="click2next"
  >
    <ElForm :model="info" :rules="rules">
      <ElFormItem
        label="排班方案名称"
        prop="scheduleSchemeName"
      >
        <ElInput
          v-model.trim="info.scheduleSchemeName"
          placeholder="请输入排班方案名称，字数不超过15个"
          :maxlength="15"
        />
      </ElFormItem>
    </ElForm>
    <div class="flex" style="min-height: 35vh">
      <div
        v-loading="loading"
        class="padding-right-sm flex-shink-0 margin-right border-right"
      >
        <div class="shift-options" style="min-width: 100px">
          <ElRadioGroup
            v-model="info.shiftUnitId"
            @change="changeHandler"
          >
            <ElRadio
              v-for="option in shiftUnitLists"
              :key="option.id"
              :label="option.id"
            >
              {{ option.name }}
            </ElRadio>
          </ElRadioGroup>
        </div>
        <div
          v-if="needPagination"
          class="align-center margin-top-xs margin-bottom-sm flex justify-end"
        >
          <ElButton
            size="small"
            :disabled="prevDisabled"
            @click="clickPrev"
          >
            上一页
          </ElButton>
          <ElButton
            size="small"
            :disabled="nextDisabled"
            @click="clickNext"
          >
            下一页
          </ElButton>
        </div>
      </div>
      <ElTable :data="info.shiftUnitDetails">
        <template #empty>
          <TableEmpty class="empty-table" />
        </template>
        <ElTableColumn
          label="班次名称"
          prop="name"
        />
        <ElTableColumn
          label="时间段"
          prop="time"
        />
        <ElTableColumn
          label="工时"
          prop="durationString"
        />
        <ElTableColumn label="是否跨天">
          <template #default="scope">
            {{ scope.row.isCrossDay ? '是' : '否' }}
          </template>
        </ElTableColumn>
      </ElTable>
    </div>
  </CustomDialog>
</template>

<style scoped>
.shift-options :deep(.el-radio-group) {
  display: block;
}
.shift-options :deep(.el-radio) {
  display: flex;
}
</style>
